﻿@{
    ViewBag.Title = "首页";
    //  Layout = null;
    var bannerlist = ViewData["banner"] as List<Pay.DTO.topic_dto>;
    var arealist = ViewData["area"] as List<Pay.DTO.topic_dto>;
    var choicelist = ViewData["choice"] as List<Pay.DTO.topic_dto>;
    var hotlist = ViewData["hot"] as Pay.TO.PagedResult<Pay.DTO.product_dto>;
    var likelist = ViewData["like"] as Pay.TO.PagedResult<Pay.DTO.product_dto>;
    var seewordlist = ViewData["seeword"] as List<Pay.DTO.topic_dto>;
    var cagerylist = ViewData["categrylist"] as List<Pay.DTO.category_ex>;
    var domain = ViewData["url"] as string;// "http://testimg.epalpay.cn/";
    var topics =ViewData["topics"] as List<Pay.DTO.topic_dto>;
}
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>首页</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta name="format-detection" content="telphone=no, email=no" />
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="msapplication-tap-highlight" content="no">

    <link rel="stylesheet" type="text/css" href="~/Content/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="~/Content/css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="~/Content/css/gelunbu.css" />
    <link href="~/Content/css/dropload.css" rel="stylesheet" />
    <style type="text/css">
        .box1 {
            width: 100%;
            height: 190px;
            overflow: hidden;
            /* 超出隐藏滚动条 */
            margin: 20px auto;
        }

            .box1 .wrap {
                width: 90%;
                /* 和父盒子宽度一样 */
                height: 190px;
                /* 比里层元素高16px 为了隐藏滚动条*/
                overflow-x: scroll;
                /* 定义超出此盒子滚动 */
                overflow-y: hidden;
                margin: 0 auto;
            }

                .box1 .wrap::-webkit-scrollbar {
                    display: none;
                }

                .box1 .wrap ul {
                    width: 750px;
                    display: flex;
                }

                    .box1 .wrap ul li {
                        flex: 1;
                        width: 80px;
                        height: 190px;
                        box-sizing: border-box;
                    }

        .hd_box_a {
            display: block;
            width: 100px;
            height: 190px;
        }

        .hd_box_img {
            margin: 10px auto;
            display: block;
        }

        .hd_list_tit {
            width: 90%;
            margin: 0 auto;
            font-size: 12px;
            color: #333333;
            font-weight: normal;
            height: 30px;
            line-height: 14px;
            padding: 0 10px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }

        .hd_list_price {
            display: block;
            font-size: 12px;
            color: #000200;
            color: red;
            margin-top: 10px;
            padding-left: 10px;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
        }

        .slide {
            width: 100%;
            min-height: 180px;
            overflow: hidden;
            position: relative;
        }

            .slide .img {
                overflow: hidden;
                position: absolute;
                transition: width 0.4s, height 0.4s, top 0.4s, left 0.4s, z-index 0.4s;
            }

                .slide .img img {
                    width: calc(100% - 14px);
                    height: calc(100% - 14px);
                    margin: 7px;
                }

            .slide .img1 {
                width: 40%;
                height: 40%;
                top: 30%;
                left: -50%;
                z-index: 1;
            }

            .slide .img2 {
                width: 60%;
                height: 60%;
                top: 20%;
                left: -20%;
                z-index: 2;
            }

            .slide .img3 {
                width: 80%;
                height: 80%;
                top: 10%;
                left: 10%;
                z-index: 3;
            }

            .slide .img4 {
                width: 60%;
                height: 60%;
                top: 20%;
                left: 60%;
                z-index: 2;
            }

            .slide .img5 {
                width: 40%;
                height: 40%;
                top: 30%;
                left: 110%;
                z-index: 1;
            }

        .slide-bt {
            position: absolute;
            left: 50%;
            bottom: 0;
            z-index: 10;
        }

            .slide-bt span {
                width: 24px;
                height: 4px;
                background: #D8D8D8;
                float: left;
                margin: 5px;
                border-radius: 4px;
            }

        .slide .slide-bt .on {
            background: #D0021B;
        }
    </style>
</head>
<body>
    <!--header-->
    <div class="header">
        <div class="search">
            <form action="" method="post" id="search-form">
                <input type="text" value="" placeholder="" autocomplete="off" class="search_ipt" />
                <a href="javascript:;" class="header_msg"></a>
            </form>
        </div>
        <!-- 滑动导航 -->
        <div class="toggle">
            <ul class="slip"></ul>
        </div>
    </div>
    <div class="glb_wraper" style="margin-top:102px ;">
        <!--首页banner-->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                @if (bannerlist != null && bannerlist.Count > 0)
                {
                    foreach (var item in bannerlist)
                    {
                        var src = domain + item.show_images;
                        <div class="swiper-slide"><img src="@src" width="100%" /></div>
                    }
                }

            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="headlines">
            <span class="icon_headlines"></span>
            <a href="javascript:;" class="headlines_title"> <em class="new"></em> 关于戈仑埠春节发货通知</a>
        </div>
        @if (arealist != null && arealist.Count > 0)
        {
        <div class="pre_sale">
				@if(arealist.Count>=1){
				var NO1 = domain + arealist[0].show_images;
					<a href="/Topic/List/?Id=@arealist[0].id&MerchantId=@arealist[0].merchant_id">
                <div class="pro_title_1">
                    <h1 class="pro_small_tit">预售专场</h1>
                    <p class="pro_small_slogin">指定产品享满减</p>
                    <img src="@NO1" alt="" class="h_picture_list" />
                </div>
                </a>
				}
            
                <div class="supermember">
                    @if(arealist.Count>=2){
                    var NO2 = domain + arealist[1].show_images;
                    <a href="/Topic/List/?Id=@arealist[1].id&MerchantId=@arealist[1].merchant_id">
                        <div class="supper_top">
                            <h1 class="pro_small_tit supper_title">预售专场</h1>
                            <p class="pro_small_slogin supper_slogin">专享特价商品</p>
                            <img src="@NO2" alt="" class="h_picture_list supper_picture" />
                        </div>
                    </a>
                    }
                    <div class="supper_bottom">
                        <ul class="supper_contian">
                            @if(arealist.Count>=3){
                            var NO3 = domain + arealist[2].show_images;
                            <li class="supper_item">
                                <a href="/Topic/List/?Id=@arealist[2].id&MerchantId=@arealist[2].merchant_id">
                                    <img src="@NO3" alt="" class="supp_item_pic" />
                                    <p class="supp_text">大牌臻选</p>
                                </a>
                            </li>
                            }
                            @if(arealist.Count>=4){
                            var NO4 = domain + arealist[3].show_images;
                            <li class="supper_item">
                                <a href="/Topic/List/?Id=@arealist[3].id&MerchantId=@arealist[3].merchant_id">
                                    <img src="@NO4" alt="" class="supp_item_pic" />
                                    <p class="supp_text">特别推荐</p>
                                </a>
                            </li>
                            }
                        </ul>
                    </div>
                </div>
        </div>
        }
        <!--专题精选-->
        @if (choicelist != null && choicelist.Count > 0)
        {
            var showimage = domain + choicelist[0].show_images;
            <div class="itembox">
                <h1 class="title_item">专题精选 <span class="title_item_slog">发现不一样的好货</span></h1>
                <a href="javascript:;" class="pic_wrapper">
                    <img src="@showimage" alt="" class="b_picture" />
                </a>
                <div class="pro_list_1">
                    <ul>
                        @if (choicelist[0].topic_groups != null && choicelist[0].topic_groups.Count > 0)
                        {
                            foreach (var item in choicelist[0].topic_groups)
                            {
                                if (item.topic_products != null && item.topic_products.Count > 0)
                                {
                                    foreach (var product in item.topic_products)
                                    {
                                        var producturl = product.product.first_image;
                                        <li>
                                            <a href="/Product/ProductDetail/@product.product.id">
                                                <img src="@(domain+producturl)" alt="" class="list_picture" />
                                                <h1 class="list_tit">@(product.product.name.Length > 10 ? product.product.name.Substring(0, 10) + ".." : product.product.name)</h1>
                                                <p class="list_txt">@product.product.short_description</p>
                                                <span class="list_price">￥@product.product.price</span>
                                            </a>
                                        </li>
                                    }
                                }
                            }
                        }

                    </ul>
                </div>
            </div>
        }
        <!--图片滑动展示-->
        <div class="">
				@foreach(var topic in topics){
				<a href="javascript:;" class="pic_wrapper">
	                <img src="@(domain+topic.show_images)" class="b_picture" />
	            </a>
				}
            <!--多图滑动-->
        </div>
        <!--带你去看世界-->
        <div class="">
            <h1 class="title_item">带你去看世界 <span class="title_item_slog">拉近世界的距离</span></h1>

            <!--伪3D焦点图-->

            <div class="container">
                <div id="slide" class="slide" alt="star">
                    <!-- 轮播图片数量可自行增减 -->
                    @if (seewordlist != null && seewordlist.Count > 0) {
                        foreach (var topic in seewordlist) {
                            var src = domain + topic.show_images;
                           
                <div class="img img1">
                    <a href="/Topic/List/?Id=@topic.id&MerchantId=@topic.merchant_id"><img src="@src"></a>
                </div>
                        }
                    }

                  

                    <div class="slide-bt" style="width: 170px; margin-left: -85px;">

                    </div>
                </div>

            </div>

        </div>
        <!--热卖-->
        <div class="hot">
            <h1 class="title_item">24小时热卖 <span class="title_item_slog">拉近世界的距离</span></h1>
            <ul class="related_container " style="background: #fff;">
                @if (hotlist!=null&&hotlist.rows != null && hotlist.rows.Count > 0)
                {
                    foreach (var hot in hotlist.rows)
                    {
                     
                        var src = hot.merchant.setting.oss_set.img_url + hot.first_image;
                        <li class="relate_item">
                            <a href="/Product/ProductDetail/@hot.id">
                                <img src="@src" class="pro_list_img">
                                <h2 class="pro_h2">@(hot.name.Length > 10 ? hot.name.Substring(0, 10) + ".." : hot.name)</h2>
                                <p class="relate_small_title">@hot.short_description</p>
                                <span class="relate_price">$@hot.price</span>
                            </a>
                        </li>
                    }
                }

            </ul>
            <a href="javascript:void(0)" onclick="ProductCategory()" class="smore">查看更多</a>
        </div>
        <!--猜你喜欢-->
        <div class="like">
            <div class="like_top">
                猜你喜欢
            </div>
            <ul class="related_container " style="background: #fff;" id="assDlist">
                @if (likelist != null && likelist.rows != null && likelist.rows.Count > 0) {
            foreach (var like in likelist.rows) {
                var likescrc = like.merchant.setting.oss_set.img_url + like.first_image;
                <li class="relate_item">
                    <a href="/Product/ProductDetail/@like.id">
                        <img src="@likescrc" class="pro_list_img">
                        <p class="relate_small_title">@(like.name.Length > 10 ? like.name.Substring(0, 10) + ".." : like.name)</p>
                        <span class="relate_price">$@like.price</span>
                    </a>
                </li>
    }
}


            </ul>
            <p class="down-loading">下拉查看更多</p>
        </div>
    </div>
    <!--底部通用导航-->
    <div class="fixed_nav">
        <ul class="fixed_nav_container">
            <li>
                <a href="/Home/Index" class="nav_hover">
                    <i class="fnav_icon_box icon_hover_1"></i> 首页
                </a>
            </li>
            <li>
                <a href="/Product/ProductCategory">
                    <i class="fnav_icon_box icon_2"></i> 分类
                </a>
            </li>
            <li>
                <a href="/ShopCart/ShopCartList">
                    <i class="fnav_icon_box icon_3"></i> 购物车
                </a>
            </li>
            <li>
                <a href="/User/UserInfo">
                    <i class="fnav_icon_box icon_4"></i> 我的
                </a>
            </li>
        </ul>
    </div>

    <script src="~/Content/js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="~/Content/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="~/Content/js/banner.js" type="text/javascript" charset="utf-8"></script>
    <script src="~/Content/js/dropload.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        var page = '@likelist.page';
            var dropload = $('.like').dropload({
                domDown: {
                    domClass: 'dropload-down',
                    domRefresh: '<div class="dropload-refresh">下拉加载更多</div>',
                    domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
                    domNoData: '<div class="dropload-noData">暂无数据</div>'
                },
                scrollArea: window,
                loadDownFn: function (me) {
                    $.ajax({
                        url: '/Home/GetData/',
                        data: { page: page},
                        success: function (response) {
                            page++;
                            var result = '';
                            for (var i = 0; i < response.data.rows.length; i++) {
                                var src = '@domain' + response.data.rows[i].first_image;
                                result += '<li class="relate_item">  <a href="/Product/ProductDetail/' + response.data.rows[i].id + '"><img src="' + src + '" class="pro_list_img"> <p class="relate_small_title">' + response.data.rows[i].name + '</p> <span class="relate_price">$' + response.data.rows[i].price + '</span>  </a> </li>';
                            }
                            $('#assDlist').append(result);
                            
                                me.resetload();
                           
                        },
                        error: function (xhr, type) {
                            me.lock();
                            me.noData();
                            me.resetload();
                        }
                    });

                }
            });
       
        $(document).ready(function () {
            var mySwiper = new Swiper('.swiper-container', {
                direction: 'horizontal',
                autoplay: true,
                loop: true,
                pagination: {
                    el: '.swiper-pagination',
                }
            });
            var categrylist = @Html.Raw(Json.Encode(cagerylist));
            var categryname = new Array();
            var categryid = new Array();
            categrylist.forEach(myFunction);
            function myFunction(item) {
                categryname.push(item.name);
                categryid.push(item.id);
            }
           
            var toggle = {
                startScroll: 0, //手指触屏时的坐标
                endScroll: 0, //手指离开时坐标
                isScroll: 0, //已经移动的距离
                moveCurrency: 0, //移动中的高亮下标
                step: 0, //每次移动距离
                data: {
                    list: categryname,
                    isScrollNum: -2, //当前移动数量  [注意：值小于等于０]
                    showNum: 5, //显示个数
                    divHeight: 50 //div的高度
                },
                toggle: '',
                slip: '',
                li: '',
                init: function () {
                    this.toggle = document.getElementsByClassName('toggle')[0];
                    this.slip = this.toggle.getElementsByClassName('slip')[0];
                    this.step = this.view().width / this.data.showNum;
                    this.isScroll = this.step * ((this.data.showNum - 1) / 2 + this.data.isScrollNum);
                    this.toggleStyle();
                    this.slipStyle();
                    this.addData();
                    this.liStyle();
                    this.scroll(this.isScroll);
                    this.lightStyle(-this.data.isScrollNum);
                    this.slip.addEventListener('touchstart', this.startMove.bind(this));
                    this.slip.addEventListener('touchmove', this.nowMove.bind(this));
                    this.slip.addEventListener('touchend', this.endMove.bind(this));

                },
                toggleStyle: function () {
                    this.toggle.style.backgroundColor = 'transparent';
                    this.toggle.style.height = this.data.divHeight + 'px';
                    this.toggle.style.lineHeight = this.data.divHeight + 'px';
                    this.toggle.style.overflow = 'hidden';
                },
                slipStyle: function () {
                    this.slip.style.width = this.step * (this.data.list.length) + 'px';
                },
                liStyle: function () {
                    this.li = this.slip.getElementsByTagName('li');
                    for (var i = 0; i < this.li.length; i++) {
                        this.li[i].style.color = '#fff';
                        this.li[i].style.listStyle = 'none';
                        this.li[i].style.display = 'inline-block';
                        this.li[i].style.textAlign = 'center';
                        this.li[i].style.fontWeight = 600;
                        this.li[i].style.transition = 'all 150ms';
                        this.li[i].style.webkitTransition = 'all 150ms';
                    }
                },
                view: function () {
                    return {
                        width: document.documentElement.clientWidth || document.body.clientWidth,
                        height: document.documentElement.clientHeight || document.body.clientHeight
                    }
                },
                addData: function () {
                    for (var i = 0; i < this.data.list.length; i++) {
                        var li = document.createElement('li');
                        li.innerHTML = this.data.list[i];
                        li.style.width = this.step + 'px';
                        this.slip.appendChild(li);
                    }
                },
                lightStyle: function (curr) {
					var len = this.li.length;
                    for (var i = 0; i < len; i++) {
                        this.li[i].style.opacity = 0.8;
                        this.li[i].style.fontSize = '14px';
                    }
					if(len-1>curr){
						this.li[curr].style.opacity = 1;
		                this.li[curr].style.fontSize = '18px';
					}
                },
                startMove: function () {
                    var e = window.event || arguments[0];
                    this.startScroll = e.changedTouches[0].pageX;
                  
                },
                nowMove: function () {
                    var e = window.event || arguments[0];
                    var figureScroll = e.changedTouches[0].pageX - this.startScroll;
                    var nowScroll = figureScroll + this.isScroll;
                    var isLight = figureScroll / this.step;
                    this.scroll(nowScroll);
                    //判断移动过程中是否高亮？
                    if (isLight > 0.5) {
                        this.moveCurrency = -this.data.isScrollNum - 1;
                    } else if (isLight < 0 && Math.abs(isLight) > 0.5) {
                        this.moveCurrency = -this.data.isScrollNum + 1;
                    }
                    if (this.moveCurrency < 0) {
                        this.moveCurrency = 0;
                    } else if (this.moveCurrency > this.li.length - 1) {
                        this.moveCurrency = this.li.length - 1;
                    }
                    this.lightStyle(this.moveCurrency);
                  
                   
                },
                endMove: function () {
                    var e = window.event || arguments[0];
                    this.endScroll = e.changedTouches[0].pageX - this.startScroll;
                    this.isScroll = this.endScroll / this.step;
                    if (this.isScroll > 0.5) {
                        this.data.isScrollNum++;
                    } else if (this.isScroll < 0 && Math.abs(this.isScroll) > 0.5) {
                        this.data.isScrollNum--;
                    }
                    if (this.data.isScrollNum < -this.li.length + 1) {
                        this.data.isScrollNum = -this.li.length + 1;
                    } else if (this.data.isScrollNum > 0) {
                        this.data.isScrollNum = 0;
                    }
                    this.isScroll = (this.data.isScrollNum + (this.data.showNum - 1) / 2) * this.step;
                    this.scroll(this.isScroll);
                    this.lightStyle(-this.data.isScrollNum);
                    window.location.href = "/Product/ProductCategory/?CategryId=" + categryid[this.moveCurrency];
                  
                },
                scroll: function (scroll) {
                    this.slip.style.transform = 'translateX(' + scroll + 'px)';
                    this.slip.style.webkitTransform = 'translateX(' + scroll + 'px)';
                }
            }
            toggle.init();
        });
    </script>
</body>

</html>